
<link href="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/css/swiper.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/Swiper/5.4.5/js/swiper.min.js"></script>

	<!-- swiper / 3D滑动展示 start-->
	<!-- 文档地址 https://www.swiper.com.cn/api/ -->
	<div class="swiper-container1" style="position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);width: 300px;height: 300px;">
	    <div class="swiper-wrapper">
			<div class="swiper-slide" style="background-color: blue;background-size: 100% 100%;">
				
			</div>
			<div class="swiper-slide" style="background-color: red;background-size: 100% 100%;">
				
			</div>
			<div class="swiper-slide" style="background-color: yellow;background-size: 100% 100%;">
				
			</div>
			<div class="swiper-slide" style="background-color: green;background-size: 100% 100%;">
				
			</div>
			<div class="swiper-slide" style="background-color: pink;background-size: 100% 100%;">
				
			</div>
		</div>
    	<div class="swiper-pagination"></div>
    </div>

	<script type="text/javascript">
		var swiper = new Swiper('.swiper-container1', {
			direction : 'horizontal',//Swiper的滑动方向，可设置为horizontal或vertical。
			loop : true,//设置为true 则开启loop模式
			effect: 'cube',//slide的切换效果，默认为"slide"（位移切换），可设置为'slide'（普通切换、默认）,"fade"（淡入）"cube"（方块）"coverflow"（3d流）"flip"（3d翻转）。
			grabCursor: true,//设置为true,鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状。
			cubeEffect: {//cube效果参数
				shadow: true,//开启投影。默认 true。
				slideShadows: true,//开启slide阴影。默认 true。
				shadowOffset: 50,//投影距离。默认 20，单位px。
				shadowScale: 0.8,//投影缩放比例。默认0.94。
			},
			pagination: {
				el:'.swiper-pagination',
				clickable :true,//开启分页器的点击事件
				bulletElement:'span',//设置生成的分页项的标签
				type: 'bullets',//分页器样式类型,可选bullets、fraction、progressbar、custom
				/*renderBullet: function (index, className) {//自定义圆点的方法
		          return `<span class='${className}' style="width:20px;height:20px;">${index}</span>`;
		        },*/
			},
			on:{
				//点击事件
				tap: function(e){
			      console.log(e.target);
			    },
			}
		});
  	</script>
	<!-- swiper / 3D滑动展示 end-->
	
